<template>
  <div id="goods-list">
    <el-container style="overflow-x:hidden;overflow-y:hidden; height:100%;">
      <el-scrollbar
        style="width:100%;height:100%;white-space: nowrap;"
        @mousewheel.native="wheel"
        ref="roleRoll"
        class="roleRoll"
      >
        <el-header>
          <!-- 查询开始 -->
          <el-form
            :inline="true"
            :model="formInline"
            class="demo-form-inline"
            style="margin-top:20px"
          >
            <el-form-item>
              <el-input
                v-model.trim="formInline.title"
                placeholder="输入类目名称"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model.trim="formInline.barcode"
                placeholder="输入商品条形码"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="formInline.status"
                placeholder="请选择广告状态"
                clearable
              >
                <el-option
                  v-for="item in optionsStatus"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-cascader
              v-model="formInline.categoryId"
                ref="coupon"
                :options="optionsCoupon"
                :props="{ checkStrictly: true }"
                clearable
                class="relevance"
              >
              </el-cascader>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="onSubmit()"
                icon="el-icon-search"
                clearable
                v-permission="'operation:goods:list'"
                >查询</el-button
              >
            </el-form-item>
            <el-form-item>
              <router-link to="/goods/upsert">
                <el-button type="primary" icon="el-icon-edit" v-permission="'operation:goods:create'">添加</el-button>
              </router-link>
            </el-form-item>
            <el-form-item>
              <el-button
                type="danger"
                icon="el-icon-delete"
                :disabled="this.arrs.length === 0"
                @click="deleteDatches()"
                v-permission="'operation:goods:delete'"
                >批量删除</el-button
              >
            </el-form-item>
          </el-form>
          <!-- 查询结束 -->
        </el-header>

        <el-main>
          <el-table
            :data="tableData"
            style="width: 100%;"
            :default-sort="{ prop: 'date', order: 'descending' }"
            align="center border show-summary"
            ref="multipleTable"
            @selection-change="handleSelectionChange"
            border
          >
            <!-- 列表数据 -->
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column type="expand" label="sku信息">
              <template slot-scope="scope">
                <el-table :data="scope.row.skuList" border style="width: 100%">
                  <el-table-column prop="barCode" label="商品条码">
                  </el-table-column>
                  <el-table-column prop="title" label="商品规格">
                  </el-table-column>
                  <el-table-column prop="stock" label="商品库存">
                  </el-table-column>
                  <el-table-column prop="freezeStock" label="商品冻结库存">
                  </el-table-column>
                  <el-table-column prop="originalPrice" label="原价">
                  </el-table-column>
                  <el-table-column prop="price" label="现价"> </el-table-column>
                  <el-table-column prop="vipPrice" label="vip价格">
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column prop="id" label="商品ID"> </el-table-column>
            <el-table-column prop="title" label="名称"></el-table-column>
            <el-table-column label="图片">
              <template slot-scope="scope">
                <el-image
                  style="width: 40px;"
                  :src="scope.row.img"
                  fit="contain"
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column label="商品详细介绍">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="edits(scope.row)"
                v-permission="'operation:goods:detail'"
                  >查看</el-button
                >
              </template>
            </el-table-column>
            <el-table-column prop="categoryId" label="类目ID">
            </el-table-column>
            <el-table-column
              prop="freightTemplateId"
              label="邮费模板ID"
            ></el-table-column>
            <el-table-column prop="sales" label="销量"></el-table-column>
            <el-table-column prop="unit" label="单位"></el-table-column>
            <el-table-column label="是否在售">
              <template slot-scope="scope">
                <el-tag :type="scope.row.status == 1 ? 'success' : 'info'">
                  {{ scope.row.status | status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="description"
              label="描述"
              width="300"
            ></el-table-column>
            <el-table-column label="操作" width="250">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="handleEdit(scope.row.id)"
                  v-permission="'operation:goods:cdit'"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  :type="scope.row.status == 0 ? 'success' : 'warning'"
                  @click="state(scope.row)"
                  v-permission="'operation:goods:cdit'"
                  >{{ scope.row.status | statusal }}
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  v-permission="'operation:goods:delete'"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-main>
        <el-footer>
          <!-- 底部页数 -->
          <paging :paging="paging" :onSubmit="onSubmit"></paging>
        </el-footer>
      </el-scrollbar>
      <!-- 滚动组件结束 -->
    </el-container>
    <!-- 主要内容结束 -->

    <el-dialog title="商品详情" :visible.sync="dialogVisible" center>
      <span
        ><div
          v-html="detail"
          class="imgdetail"
          style="line-height:0px;text-align: center;"
        ></div
      ></span>
    </el-dialog>
  </div>
</template>

<script>
import goodslist from "@/api/goodslist";
import Paging from "../../components/Paging";
export default {
  components: {
    Paging,
  },
  data() {
    return {
      optionsStatus: [
        //选项框状态
        {
          value: 0,
          label: "下架",
        },
        {
          value: 1,
          label: "正常",
        },
      ],
      detail: "", //商品详情
      optionsCoupon: [], //选项框商品
      formInline: {
        //查询数据
        title:'',//类目名称
        barcode:'',//商品条形码
        status: null, //状态
        categoryId:null//类目ID
      },
      dialogVisible: false, //对话框表单的隐藏显示
      tableData: [], //后台全部列表数据
      paging: {
        currentPage: 1, //出现的页数
        pagesize: 10, //    每页的数据
        total: 0, //总条数
      },
      arrs: [], //选中的删除
    };
  },
  created: function() {
    //一开始的渲染数据
    this.onSubmit();
    goodslist.getSpuBigTree().then((res) => {
      //SPU树选项
      this.optionsCoupon = this.getTreeData(res.data.data);
    });
  },
  filters: {
    status: function(value) {
      switch (value) {
        case 0:
          value = "未售";
          break;
        default:
          value = "在售";
          break;
      }
      return value;
    },
    statusal: function(value) {
      switch (value) {
        case 0:
          value = "上架";
          break;
        default:
          value = "下架";
          break;
      }
      return value;
    },
  },
  methods: {
    onSubmit() {
      //查询
      let that = this;
      let value =JSON.parse(JSON.stringify(that.formInline))
      if (that.formInline.categoryId!=null&&that.formInline.categoryId!="") {
       value.categoryId=value.categoryId[value.categoryId.length-1]
       value.categoryId=value.categoryId.substr(2,)
      }
      let data = Object.assign(value, {
        page: that.paging.currentPage,
        limit: that.paging.pagesize,
      });
      goodslist
        .listInquire(data)
        //查询接口封装
        .then((res) => {
          console.log(res);
          that.tableData = res.data.data.items; //获取数据赋值
          that.paging.total = res.data.data.total; //总条数
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    getTreeData(data) {
      //递归方法
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          //children是数据库中的变量名
          data[i].children = undefined;
        } else {
          this.getTreeData(data[i].children); //返回元素的子元素的集合有数据继续导出
        }
      }
      return data;
    },
    edits(row) {//详细
      this.dialogVisible = true;
      console.log(row);
      goodslist.details({ spuId: row.id }).then((res) => {
        console.log(res);
        this.detail = res.data.data.detail;
      });
    },
    handleEdit(id) {
      this.$router.push({path:'/goods/upsert',query:{id}});
    },
    handleDelete(index, row) {
      //删除
      console.log(row);
      let that = this;
      this.$confirm(
        "此操作将永久删除--" + row.title + "--, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          goodslist
            .sdelete({
              //删除封装接口
              spuId: row.id,
            })
            .then(function(res) {
              console.log(res);
              if (res.data.errmsg == "成功") {
                that.topTips(res.data.errmsg, "success");
                that.paging.total = that.paging.total - 1; //总共条数-1条
                that.tableData.splice(index, 1);
              } else {
                that.topTips(res.data.errmsg, "error");
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    deleteDatches() {
      //批量删除
      var _this = this;
      var ids = _this.arrs
        .map((item) => item.id)
        .join()
        .split(","); //join()获取所有选中行的id组成的字符串，以逗号分隔
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          goodslist.batchDelete(ids).then((res) => {
            console.log(res);
            if (res.data.errno == 200) {
              _this.onSubmit();
              _this.topTips("删除成功！", "success");
            } else {
              _this.topTips(res.data.errmsg, "error");
            }
          });
        })
        .catch((err) => {
          return err;
        });
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      console.log(val);
      this.arrs = val;
    },
    state(row) {//上架下架状态
      console.log(row);
      let _this = this
      if (row.status == 0) {
        row.status = 1;
      } else {
        row.status = 0;
      }
      goodslist
        .freezeOrActivation({
          spuId: row.id,
          status: row.status,
        })
        .then((res) => {
          if (res.data.errno == 200) {
            _this.topTips("修改成功！", "success");
          } else {
            _this.topTips(res.data.errmsg, "error");
          }
        });
    },
    resetForm(formName) {
      //重置验证
      let that = this;
      setTimeout(function() {
        that.$refs[formName].resetFields();
      }, 50);
    },
    handleAvatarSuccess(res) {
      this.ruleForm.img = res.url;
    },
    //限制图片格式大小
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    wheel(e) {
      //滚动事件
      e = e || window.event;
      if (e.wheelDelta) {
        if (e.wheelDelta < 0) {
          //控制滚动的方向
          //向下
          this.$refs.roleRoll.wrap.scrollTop += 20;
        } else {
          this.$refs.roleRoll.wrap.scrollTop -= 20;
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
#goods-list {
  //内容填满
  height: 100%;
}
.el-main {
  line-height: 0px !important;
}
.concer-input {
  //查询文本框
  width: 25%;
  margin-right: 10px;
}
.el-header {
  //查询布局
  line-height: 52px;
  height: auto !important;
}
.demo-form-inline {
  //查询布局
  white-space: pre-line;
}
.demo-form-inline > div {
  //查询布局
  margin-bottom: 0px;
}
</style>

<style>
.el-dialog__header,
.dialog-footer,
.el-tree-node__label,
.el-dialog__footer,
.el-checkbox,
.custom-tree-node {
  /*对话框的行高*/
  line-height: 0px;
}
.cell {
  /*列表居中*/
  text-align: center;
}
::-webkit-scrollbar {
  /*对话框的隐藏滚动条但是可以滚动，滚动条的宽度*/
  width: 0px !important;
}
/* .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
} */
/* .avatar {
  width: 120px;
  height: 120px;
  display: block;
} */
.el-cascader-panel > div {
  width: 200px;
}
.el-table {
  font-size: 13px;
}
.imgdetail img {
  max-width: 100%;
  height: auto;
  line-height: 0px;
}
</style>
